'use client'
import { ThemeToggle } from '@/components/theme-toggle'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import { Separator } from '@/components/ui/separator'
import { Collapsible } from 'radix-ui'

import { motion } from 'motion/react'
import { Apple, Boxes, ChevronDown, ChevronLeft, LogOut, Menu, Ruler, Utensils } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ReactNode, useState } from 'react'

type RouteGroup = {
  group: string
  items: {
    href: string
    label: string
    icon: ReactNode
  }[]
}

const ROUTE_GROUPS: RouteGroup[] = [
  {
    group: '食品管理',
    items: [
      {
        href: '/admin/foods-management/foods',
        label: '食物',
        icon: <Apple className='mr-2 size-3' />
      },
      {
        href: '/admin/foods-management/categories',
        label: '分类',
        icon: <Boxes className='mr-2 size-3' />
      },
      {
        href: '/admin/foods-management/serving-units',
        label: '服务单位',
        icon: <Ruler className='mr-2 size-3' />
      }
    ]
  },
  {
    group: '膳食管理',
    items: [
      {
        href: '/client',
        label: '饭食',
        icon: <Utensils className='mr-2 size-3' />
      }
    ]
  }
]

type DashboardLayoutProps = { children: ReactNode }
const DashboardLayout = ({ children }: DashboardLayoutProps) => {
  const [open, setOpen] = useState(true)
  return (
    <div className='flex'>
      <div className='bg-background fixed z-10 flex h-13 w-screen items-center justify-between border px-2'>
        <Collapsible.Root className='h-full' open={open} onOpenChange={setOpen}>
          <Collapsible.Trigger className='m-2' asChild>
            <Button size='icon' variant='outline'>
              <Menu />
            </Button>
          </Collapsible.Trigger>
        </Collapsible.Root>
        <div className='flex'>
          <ThemeToggle />
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant='ghost' className='flex h-9 items-center gap-2 px-2'>
                <Avatar className='size-8'>
                  <AvatarFallback>avatar</AvatarFallback>
                </Avatar>
                <span className='hidden md:inline'>name</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align='end' className='w-56'>
              <DropdownMenuLabel>My Account</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <div className='flex items-center gap-3 px-2 py-1.5'>
                <Avatar className='size-10'>
                  <AvatarFallback>username</AvatarFallback>
                </Avatar>
                <div>
                  <p className='text-sm font-medium'>name</p>
                  <p className='text-muted-foreground text-xs'>email</p>
                </div>
              </div>
              <DropdownMenuSeparator />
              <DropdownMenuItem variant='destructive'>
                <LogOut className='size-4' /> Logout
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      <Collapsible.Root className='fixed top-0 left-0 z-20 h-dvh' open={open} onOpenChange={setOpen}>
        <Collapsible.Content forceMount>
          <div
            className={`bg-background fixed top-0 left-0 h-screen w-64 border p-4 transition-transform duration-300 ${
              open ? 'translate-x-0' : '-translate-x-full'
            }`}
          >
            <div className='flex items-center justify-between'>
              <h1 className='font-semibold'>管理仪表板</h1>
              <Collapsible.Trigger asChild>
                <Button size='icon' variant='outline'>
                  <ChevronLeft />
                </Button>
              </Collapsible.Trigger>
            </div>

            <Separator className='my-2' />

            <div className='mt-4 flex flex-col'>
              {ROUTE_GROUPS.map(routeGroup => (
                <RouteGroup {...routeGroup} key={routeGroup.group} />
              ))}
            </div>
          </div>
        </Collapsible.Content>
      </Collapsible.Root>
      <main className={`transition-margin mt-13 flex-1 p-4 duration-300 ${open ? 'ml-64' : 'ml-0'}`}>{children}</main>
    </div>
  )
}

type RouteGroupProps = RouteGroup
const RouteGroup = ({ group, items }: RouteGroupProps) => {
  const [open, setOpen] = useState(true)
  const pathname = usePathname()

  return (
    <Collapsible.Root open={open} onOpenChange={setOpen}>
      <Collapsible.Trigger asChild>
        <Button className='text-foreground/80 flex w-full justify-between font-normal' variant='ghost'>
          {group}
          <motion.div animate={{ rotate: open ? 180 : 0 }}>
            <ChevronDown />
          </motion.div>
        </Button>
      </Collapsible.Trigger>
      <Collapsible.Content forceMount>
        <motion.div
          className={`flex flex-col gap-2 ${!open ? 'pointer-events-none' : ''}`}
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
          transition={{ duration: 0.2, ease: 'easeInOut' }}
        >
          {items.map(item => (
            <Button className='w-full justify-start font-normal' variant='link' asChild key={item.href}>
              <Link
                href={item.href}
                className={`flex items-center rounded-md px-5 py-1 transition-all ${
                  pathname === item.href ? 'bg-foreground/10 hover:bg-foreground/5' : 'hover:bg-foreground/10'
                }`}
              >
                {item.icon}
                <span className='text-sm'>{item.label}</span>
              </Link>
            </Button>
          ))}
        </motion.div>
      </Collapsible.Content>
    </Collapsible.Root>
  )
}

export { DashboardLayout }
